//头部和尾部加载

$('header').load('./html/index_header.html', () => {
    (function fn() {
        let session = sessionStorage.getItem('name') - 0
        if (!session) {
            $('.headeruser').html('登录')
            $('.headerpass').html('注册')
        } else {
            let local = JSON.parse(localStorage.getItem('DELL'))
            let find = local[session]
            // console.log(find.user)
            $('.headeruser').html('欢迎' + find.user)
            $('.headerpass').attr('href', '#')
            $('.headerpass').html('退出').on('click', function () {
                $('.headeruser').html('登录')
                $('.headerpass').html('注册')
                // .attr('href','../html/register.html')
                sessionStorage.removeItem('name')

            })
        }
    }())
})

$('footer').load('./html/index_footer.html', () => {


    $('.gocart').on('click', function () {
        let user = document.querySelector('.headeruser').innerHTML
        let localuser = JSON.parse(localStorage.getItem('DELL'))
        let res = localuser.some(item => {
            return '欢迎' + item.user == user
        })

        if (!res) {
            alert("您还未登陆！")
            $('.gocart').removeAttr('href')
        }
    })

})
$('.catalogue>div').mouseover(function () {
    $('.catalogue1').addClass('on')
    $('.catalogue1>div').removeClass('on')
    let ide = $(this).index()
    $('.catalogue1>div').eq(ide).addClass('on')
})
$('.catalogue').mouseout(function () {
    $('.catalogue1').removeClass('on')
})


$('main').load('./html/main.html', () => {




    // 二级菜单
    // 1
    $('.navli').hover(function () {
        $('.secondUl').css('display', 'block')

    }, function () {
        $('.secondUl').css('display', 'none')
    })
    $('.secondUl').hover(function () {
        $('.secondUl').css('display', 'block')

    }, function () {
        $('.secondUl').css('display', 'none')
    })
    $.ajax({
            url: './data/goods.json',
        })
        .then((res) => {
            var data = res;
            let secondnav = data.slice(20, 25)
            let secondUl = document.querySelector('.secondUl>ul')
            secondnav.forEach(item => {
                secondUl.innerHTML += `
            <li>
                <a href="./html/detail.html?id=${item.goods_id}">
                    <img src="${item.img_small_logo}" alt="">
                    <p>${item.title}</p>
                </a>
            </li>
            `
            })
        })

    // 2
    $('.navli2').hover(function () {
        $('.secondUl2').css('display', 'block')

    }, function () {
        $('.secondUl2').css('display', 'none')
    })
    $('.secondUl2').hover(function () {
        $('.secondUl2').css('display', 'block')

    }, function () {
        $('.secondUl2').css('display', 'none')
    })
    $.ajax({
            url: './data/goods.json',
        })
        .then((res) => {
            var data = res;
            let secondnav = data.slice(30, 35)
            let secondUl = document.querySelector('.secondUl2>ul')
            secondnav.forEach(item => {
                secondUl.innerHTML += `
            <li>
                <a href="./html/detail.html?id=${item.goods_id}">
                    <img src="${item.img_small_logo}" alt="">
                    <p>${item.title}</p>
                </a>
            </li>
            `
            })
        })

    // 3
    $('.navli3').hover(function () {
        $('.secondUl3').css('display', 'block')

    }, function () {
        $('.secondUl3').css('display', 'none')
    })
    $('.secondUl3').hover(function () {
        $('.secondUl3').css('display', 'block')

    }, function () {
        $('.secondUl3').css('display', 'none')
    })
    $.ajax({
            url: './data/goods.json',
        })
        .then((res) => {
            var data = res;
            let secondnav = data.slice(40, 45)
            let secondUl = document.querySelector('.secondUl3>ul')
            secondnav.forEach(item => {
                secondUl.innerHTML += `
            <li>
                <a href="./html/detail.html?id=${item.goods_id}">
                    <img src="${item.img_small_logo}" alt="">
                    <p>${item.title}</p>
                </a>
            </li>
            `
            })
        })

    // 4
    $('.navli4').hover(function () {
        $('.secondUl4').css('display', 'block')

    }, function () {
        $('.secondUl4').css('display', 'none')
    })
    $('.secondUl4').hover(function () {
        $('.secondUl4').css('display', 'block')

    }, function () {
        $('.secondUl4').css('display', 'none')
    })
    $.ajax({
            url: './data/goods.json',
        })
        .then((res) => {
            var data = res;
            let secondnav = data.slice(50, 55)
            let secondUl = document.querySelector('.secondUl4>ul')
            secondnav.forEach(item => {
                secondUl.innerHTML += `
            <li>
                <a href="./html/detail.html?id=${item.goods_id}">
                    <img src="${item.img_small_logo}" alt="">
                    <p>${item.title}</p>
                </a>
            </li>
            `
            })
        })
    //5 
    $('.navli5').hover(function () {
        $('.secondUl5').css('display', 'block')

    }, function () {
        $('.secondUl5').css('display', 'none')
    })
    $('.secondUl5').hover(function () {
        $('.secondUl5').css('display', 'block')

    }, function () {
        $('.secondUl5').css('display', 'none')
    })
    $.ajax({
            url: './data/goods.json',
        })
        .then((res) => {
            var data = res;
            let secondnav = data.slice(60, 65)
            let secondUl = document.querySelector('.secondUl5>ul')
            secondnav.forEach(item => {
                secondUl.innerHTML += `
            <li>
                <a href="./html/detail.html?id=${item.goods_id}">
                    <img src="${item.img_small_logo}" alt="">
                    <p>${item.title}</p>
                </a>
            </li>
            `
            })
        })
    //6
    $('.navli6').hover(function () {
        $('.secondUl6').css('display', 'block')

    }, function () {
        $('.secondUl6').css('display', 'none')
    })
    $('.secondUl6').hover(function () {
        $('.secondUl6').css('display', 'block')

    }, function () {
        $('.secondUl6').css('display', 'none')
    })
    $.ajax({
            url: './data/goods.json',
        })
        .then((res) => {
            var data = res;
            let secondnav = data.slice(70, 75)
            let secondUl = document.querySelector('.secondUl6>ul')
            secondnav.forEach(item => {
                secondUl.innerHTML += `
            <li>
                <a href="./html/detail.html?id=${item.goods_id}">
                    <img src="${item.img_small_logo}" alt="">
                    <p>${item.title}</p>
                </a>
            </li>
            `
            })
        })

    // 隐藏二级菜单
    $(window).scroll(function () {
        if ($(document).scrollTop() > 0) {
            $('.secondUl').css('display', 'none')
            $('.secondUl2').css('display', 'none')
            $('.secondUl3').css('display', 'none')
            $('.secondUl4').css('display', 'none')
            $('.secondUl5').css('display', 'none')
            $('.secondUl6').css('display', 'none')
        }
    })




   

})
require(['./index_config'], function () {

    // 轮播图
    require(['swiper', 'jquery'], (Swiper) => {
        var mySwiper = new Swiper('.swiper-container', {
            //direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: {
                autoplay: true,
                delay: 2000, //1秒切换一次
            },

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }


        })
        //鼠标滑过pagination控制swiper切换
        for (let i = 0; i < mySwiper.pagination.bullets.length; i++) {
            mySwiper.pagination.bullets[i].onmouseover = function () {
                this.click();
            };
        }
        //如果你在swiper初始化后才决定使用clickable，可以这样设置
        mySwiper.params.pagination.clickable = true;
        //此外还需要重新初始化pagination
        mySwiper.pagination.destroy()
        mySwiper.pagination.init()
        mySwiper.pagination.bullets.eq(0).addClass('swiper-pagination-bullet-active');
        //鼠标覆盖停止自动切换
        mySwiper.el.onmouseover = function () {
            mySwiper.autoplay.stop();
        }
        //鼠标离开开始自动切换
        mySwiper.el.onmouseout = function () {
            mySwiper.autoplay.start();
        }

    })

})


// 






// 数据渲染
$.ajax({
        url: './data/goods.json',
    })
    .then((res) => {
        var data = res;

        // 限时购
        let datanav = data.slice(100, 110)
        let setTimeout = document.querySelector('.setTimeout>.timeoutmid>.bttime')
        datanav.forEach(item => {
            setTimeout.innerHTML += `
                <a href="./html/detail.html?id=${item.goods_id}">
                    <div class="bttime1">
                        <div class="bttimetop">
                            <img src="${item.img_small_logo}" alt="">
                        </div>
                        <div class="bttimebt">
                            <p>${item.title}</p>
                            <span>${item.category}</span>
                            <i>¥${item.price}</i>
                        </div>
                    </div>
                </a>
                `
        })
        let but = document.querySelector('button')





        // 爆款区域
        let popnav = data.slice(111, 119)
        let Popular = document.querySelector('.Popular>.popmid>.bttime')
        popnav.forEach(item => {
            Popular.innerHTML += `
                <a href="./html/detail.html?id=${item.goods_id}">
                    <div class="bttime1">
                        <div class="bttimetop">
                            <img src="${item.img_small_logo}" alt="">
                        </div>
                        <div class="bttimebt">
                            <p>${item.title}</p>
                            <span>${item.category}</span>
                            <i>¥${item.price}</i>
                        </div>
                    </div>
                </a>
                `
        })

        // 手机区域
        let phonenav = data.slice(120, 128)
        let phonewatch = document.querySelector('.phonewatch>.phonewatchmid>.bttime')
        phonenav.forEach(item => {
            phonewatch.innerHTML += `
                <a href="./html/detail.html?id=${item.goods_id}">
                    <div class="bttime1">
                        <div class="bttimetop">
                            <img src="${item.img_small_logo}" alt="">
                        </div>
                        <div class="bttimebt">
                            <p>${item.title}</p>
                            <span>${item.category}</span>
                            <i>¥${item.price}</i>
                        </div>
                    </div>
                </a>
                `
        })

        // 穿戴区域
        let watchnav = data.slice(129, 137)
        let watchphone = document.querySelector('.watchphone>.watchphonemid>.bttime')
        watchnav.forEach(item => {
            watchphone.innerHTML += `
                <a href="./html/detail.html?id=${item.goods_id}">
                    <div class="bttime1">
                        <div class="bttimetop">
                            <img src="${item.img_small_logo}" alt="">
                        </div>
                        <div class="bttimebt">
                            <p>${item.title}</p>
                            <span>${item.category}</span>
                            <i>¥${item.price}</i>
                        </div>
                    </div>
                </a>
                `
        })


        // 生态区域
        let ecologynav = data.slice(138, 148)
        let ecology = document.querySelector('.ecology>.ecologymid>.bttime')
        ecologynav.forEach(item => {
            ecology.innerHTML += `
                <a href="./html/detail.html?id=${item.goods_id}">
                    <div class="bttime1">
                        <div class="bttimetop">
                            <img src="${item.img_small_logo}" alt="">
                        </div>
                        <div class="bttimebt">
                            <p>${item.title}</p>
                            <span>${item.category}</span>
                            <i>¥${item.price}</i>
                        </div>
                    </div>
                </a>
                `
        })
        
        let x=149
        let y=159
       
        let bute = document.querySelector('.more')
        bute.onclick = function () {
            let butmore=data.slice(x,y)
            butmore.forEach(item => {
                ecology.innerHTML += `
                    <a href="./html/detail.html?id=${item.goods_id}">
                        <div class="bttime1">
                            <div class="bttimetop">
                                <img src="${item.img_small_logo}" alt="">
                            </div>
                            <div class="bttimebt">
                                <p>${item.title}</p>
                                <span>${item.category}</span>
                                <i>¥${item.price}</i>
                            </div>
                        </div>
                    </a>
                    `
                   
            })
            x=x+9,
            y=y+9

        }





    })




// 固定浮窗显示隐藏返回顶部
$(document).scroll(function () {
    let fixed = document.querySelector('.fixed')
    let li = document.querySelector('#screeny')
    let pageY = pageYOffset
    if (pageY < 700) {
        // li.style.display = 'none';
        // fixed.style.height = 236 + 'px';
        $(li).css('display', 'none')
        $(fixed).css('height', 236 + 'px')
    } else {
        $(li).css('display', 'block')
        $(fixed).css('height', 292 + 'px')
    }
});